<template>
	<view class="delay-list accident-sign-list  pb-60">
		<view>
			<view class="search">
				<view style="background-color: #fff;margin: 0 10px;border-radius: 5px;height: 42px;" class="uni-flex">
					<view style="-webkit-flex: 1;flex: 1;" class="uni-flex">
						<view class="date-p uni-flex" style="margin:3px 15px;margin-left: 5px;">
							<!-- 	<uni-datetime-picker type="date" v-model="createdAt" :border="false"
								placeholder="登记日期"  @change="changeDate" /> -->
							<uni-data-select v-model="dateType" :localdata="dateTypeOption" @change="changeDateType"
								:clear="false"></uni-data-select>
							<dy-Date style="-webkit-flex: 1;flex: 1;" timeType="month" placeholder="请选择月份"
								:childValue="createdAt" @getData="changeDate"></dy-Date>
						</view>
					</view>
					<!-- <view class="search-btn"><uni-icons type="search" color="#fff" size="20" /></view> -->
				</view>
			</view>
			<view class="content ">
				<z-paging ref="paging" v-model="dataList" @query="queryList">

					<view class="delay-table uni-mlr-5" v-if="dataList.length">
						<view class="uni-flex uni-row  delay-item-table delay-item-table-header">
							<view class="uni-flex">
								<view class="checkbox-icon">#</view>
								<!-- <view class="case-order">#</view> -->
								<view class="case-no">案件编号</view>
								<view class="flaight-no">航班号</view>
								<view class="flaight-time">航班日</view>
								<view class="lstPayItem">赔偿项目</view>
							</view>
						</view>

						<view class="uni-flex uni-row delay-item-table " v-for="(item,index) in dataList" :key="index">
							<view class="uni-flex"
								:style="{'backgroundColor':item.checked?'rgba(205,224,245,0.3)':'#fff'}">
								<view class="checkbox-icon">
									<view style="font-size: 20rpx;text-align: center;color:#999">{{index+1}}</view>
									<checkbox-group @change.stop="changeCheckItem(item,$event)">
										<checkbox style="transform:scale(0.7);" :checked="item.checked"
											:value="item.eventId" color="#0c6eb7" />
									</checkbox-group>
								</view>
								<!-- <view class="case-order">{{index+1}}</view> -->
								<view class="case-no" @tap="goUploadCredial(item)">
									<view>{{item.caseId}}</view>
									<view>{{item.selfId}}</view>
								</view>
								<view class="flaight-no" @tap="goUploadCredial(item)">
									<view>{{item.flaightNo}}</view>
									<view>{{item.planeNo}}</view>
								</view>
								<view class="flaight-time" @tap="goUploadCredial(item)">
									<div class="verlign-m">
										{{item.flaightTime&&item.flaightTime.length?(item.flaightTime.split('-')[1]+'-'+item.flaightTime.split('-')[2]):item.flaightTime}}
									</div>
								</view>
								<view class="lstPayItem uni-flex " @tap="goUploadCredial(item)">
									<view v-for="(item1,idx1) in item.lstPayItem" :key="idx1" style="width: 100%;">
										<view style="width: 100%;">{{item1.name}}:<text>{{item1.pay}}</text></view>
									</view>

								</view>
							</view>
							<view class="sign-status" v-if="item.airCompanySig.length">已签</view>
							<!--  -->
						</view>
					</view>
					<view slot="empty" class="empty text-center text-sm"><text>暂时没有数据~</text>
					</view>
				</z-paging>
			</view>

		</view>
		<!-- 底部按钮 -->
		<view class="bottom-btn-fixed">
			<view>
				<!-- <button class="btn-f" type="primary" @click="handleShowCheckBox" v-if="!showCheckBox">显示勾选框</button> -->
				<!-- <button class="btn-f" type="primary" @click="checkAllOrNo" v-if="showCheckBox">全选/全不选</button> -->
				<view style="font-size: 26rpx;line-height: 30px;">
					<checkbox-group @click="changeCheckAllOrNo">
						<checkbox style="transform:scale(0.7);margin-top: 3px;" :checked="checkedAll" value="all"
							color="#0c6eb7" />全选/全不选
					</checkbox-group>
				</view>
				<!-- <button class="btn-f" type="primary" @click="handleHideCheckBox" v-if="showCheckBox">隐藏勾选框</button> -->
				<button class="btn-f" type="primary" @click="batchSign">批量签字</button>
			</view>
		</view>
		<!-- 弹出批量签名 -->
		<uni-popup ref="popup" type="bottom" border-radius="10px 10px 0 0" background-color="#fff">
			<view>
				<uni-section :title="'请签字（案件数量：'+selectedNum+'）'" type="line">
					<view class="example-body"
						style="border:dashed 1px #0c6eb7;margin: 0 10px;border-radius: 5px;height: 300px;position: relative;">
						<l-signature disableScroll :key="1" ref="signatureRef" penColor="black" :penSize="5"
							:openSmooth="false" v-if="delaySign"></l-signature>
					</view>
					<view class="uni-flex uni-mt-5" style="justify-content: center;">
						<button class="uni-btn uni-btn-small" @click="onClick('clear')" size="mini">清空</button>
						<button class="uni-btn uni-btn-small" @click="onClick('save')" type="primary"
							size="mini">保存</button>
					</view>
				</uni-section>
			</view>

		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// current: 0,
				// activeColor: '#0c6eb7',
				dateType: 'createdAt',
				dateTypeOption: [{
						value: 'createdAt',
						text: "建档日"
					},
					{
						value: 'byOverTime',
						text: "结案日"
					},
					{
						value: 'byFlaightTime',
						text: "航班日"
					},
				],
				createdAt: '',
				url: {
					list: '/event/query',
				},
				saveSignUrl: "/event/aircompanysig/save",
				dataList: [],
				eventId: '',
				token: '',
				// showCheckBox: false,
				checkedAll: false,
				selectedNum: 0,
				delaySign: false

			}
		},
		onLoad(e) {
			this.token = uni.getStorageSync('token')
			this.createdAt = this.getDate(Date.now())

			if (e.eventId) {
				this.eventId = e.eventId;
			}
			// this.eventId = '65a3dc95b65405857ed3b446'
			// let params = {
			// 	createdAt: this.createdAt,
			// 	page: 0,
			// 	limit: 20,
			// eventId:''
			// }
			// this.initData(params);
			// this.$refs.popup.open('bottom')
		},
		onShow() {
			// 从详情页-回退回来，要刷新一下
			this.queryList(1, 10)

		},
		methods: {
			queryList(pageNo, pageSize) {
				// console.log(2,pageNo, pageSize,this.url);
				//这里的pageNo和pageSize会自动计算好，直接传给服务器即可
				//这里的请求只是演示，请替换成自己的项目的网络请求，请在网络请求回调中
				//通过this.$refs.paging.complete(请求回来的数组);将请求结果传给z-paging
				let me = this
				var params = {
					page: pageNo,
					limit: pageSize,
					token: this.token,
					createdAt: this.createdAt,
					dateType: this.dateType,
				}
				if (this.eventId.length) {
					params.eventId = this.eventId
				}
				this.$http.post('/event/query', params).then(res => {
					// console.log(res)
					if (res.data.errcode == 0) {
						// me.newsList=res.data.result.records
						me.$refs.paging.complete(res.data.data);

					} else {
						uni.showToast({
							title: res.data.errmsg,
							icon: "none"
						})
					}
				})
			},
			changeDateType() {
				this.checkedAll = false
				this.dataList.length = 0
				this.queryList(1, 10)
			},
			// handleShowCheckBox() {
			// 	this.showCheckBox = true
			// },
			// handleHideCheckBox() {
			// 	this.showCheckBox = false
			// 	this.checkedAll = false
			// 	this.dataList.forEach((item) => item.checked = false)
			// },
			changeCheckAllOrNo() {
				this.checkedAll = !this.checkedAll
				if (this.checkedAll) {
					// this.checkedAll = true
					this.dataList.forEach((item) => item.checked = true)
				} else {
					// this.checkedAll = false
					this.dataList.forEach((item) => item.checked = false)
				}

			},
			changeCheckItem(item, e) {
				// console.log(item,e);
				if (e.detail.value.length) {
					// item.checked = true
					this.$set(item, 'checked', true)
				} else {
					// item.checked = false
					this.checkedAll = false
					this.$set(item, 'checked', false)
				}

			},
			batchSign() {
				// console.log(this.dataList);
				this.selectedNum = this.dataList.filter((item) => item.checked == true).length
				if (this.selectedNum == 0) {
					uni.showToast({
						title: "未选中任何案件",
						icon: "none"
					})
					return
				}

				setTimeout(() => {
					this.delaySign = true
					this.$refs.popup.open('bottom')
					this.$refs.signatureRef.clear()
				}, 200);
			},
			changeDate(e) {
				// console.log('----change事件:', e);
				this.checkedAll = false
				this.dataList.length = 0
				this.createdAt = e
				this.queryList(1, 10)
			},
			goUploadCredial(item) {
				uni.navigateTo({
					url: '/pages/index/sign?data=' + JSON.stringify(item)
				})
			},
			getDate(date) {
				date = new Date(date)
				const year = date.getFullYear()
				const month = date.getMonth() + 1
				return `${year}-${this.addZero(month)}`
			},
			addZero(num) {
				if (num < 10) {
					num = `0${num}`
				}
				return num
			},

			viewAll() {
				this.eventId = ''
				uni.reLaunch({
					url: './accidentSignList'
				})
			},
			async onClick(type) {
				let that = this;
				if (type == 'save') {
					let eventIds = this.dataList.filter((item) => item.checked == true).map(item => item.eventId)
						.join('|')
					this.$refs.signatureRef.canvasToTempFilePath({
						success: (res) => {
							// 是否为空画板 无签名
							// console.log(res.isEmpty)
							// console.log(res)
							// 微信小程序-生成图片的临时路径
							// 执行图片转base64方法
							that.base64(res.tempFilePath, "png").then(res => {
								console.log(res, 'base64路径') //res是base64路径
								that.url = res
								// console.log(res);
								let params = {
									token: that.token,
									eventId: eventIds,
									imageBase64: that.url
								}
								that.$http.post(that.saveSignUrl, params).then(res => {
									// console.log(res)
									if (res.data.errcode == 0) {
										uni.showToast({
											title: '保存成功',
											icon: "success"
										})
										that.delaySign = false
										that.$refs.popup.close()
										setTimeout(() => {
											that.queryList(1, 10)
											that.checkedAll = false
										}, 200);


									} else {
										uni.showToast({
											title: res.data.errmsg,
											icon: "none"
										})
									}
								})
							})

						}
					})

				} else {
					this.$refs.signatureRef.clear()

				}
			},
			// 图片转64
			base64(url, type) {
				return new Promise((resolve, reject) => {
					wx.getFileSystemManager().readFile({
						filePath: url, //选择图片返回的相对路径
						encoding: 'base64', //编码格式
						success: res => {
							// resolve('data:image/' + type.toLocaleLowerCase() + ';base64,' + res.data)
							resolve(res.data)
						},
						fail: res => reject(res.errMsg)
					})
				})
			}

		}
	}
</script>

<style lang="less">
	.accident-sign-list .z-paging-content {
		top: 60px !important;
	}

	/* #ifdef H5 */
	.accident-sign-list .z-paging-content {
		top: 90px !important;
	}

	/* #endif */
	.delay-table {
		border: solid 1rpx #cde0f5;
		border-bottom: none;
		box-sizing: border-box;
	}

	.delay-item-table {
		border-bottom: solid 1rpx #cde0f5;
		font-size: 22rpx;
		position: relative;
		overflow: hidden;


		.sign-status {
			background-color: #cde0f5;
			// border: solid 1px #0c6eb7;
			color: #0c6eb7;
			position: absolute;
			padding: 1px 15px;
			top: 0px;
			right: -17px;
			// border-top: none;
			font-size: 18rpx;
			transform: rotate(45deg);

		}

		.uni-flex {
			width: 100%;
		}

		.checkItem {
			background-color: #cde0f5;
		}


		.checkbox-icon {
			width: 26px;
			padding: 8rpx;
			border-right: solid 1rpx #cde0f5;
		}

		// .case-order {
		// 	width: 20px;
		// 	padding: 8rpx;
		// 	border-right: solid 1rpx #cde0f5;
		// 	text-align: center;
		// 	padding-top: 16rpx;
		// }

		.case-no {
			width: 90px;
			padding: 8rpx;
			border-right: solid 1rpx #cde0f5;
			word-wrap: break-word;
		}

		.flaight-no {
			width: 50px;
			padding: 8rpx;
			border-right: solid 1rpx #cde0f5;
			text-align: center;
			word-wrap: break-word;
		}

		.flaight-time {
			width: 40px;
			padding: 8rpx;
			border-right: solid 1rpx #cde0f5;
			text-align: center;
			position: relative;
		}

		.verlign-m {
			position: absolute;
			top: 50%;
			margin-top: -15rpx;
			text-align: center;
			left: 50%;
			margin-left: -30rpx;
		}

		.lstPayItem {
			flex: 1;
			padding: 8rpx;
			flex-wrap: wrap;
		}
	}

	.delay-item-table-header {
		background-color: #cde0f5;

		view {
			text-align: center;
		}

		.checkbox-icon {
			border-right: solid 1rpx #fff;
		}

		// .case-order {
		// 	border-right: solid 1rpx #fff;
		// }

		.case-no {
			border-right: solid 1rpx #fff;
		}

		.flaight-no {
			border-right: solid 1rpx #fff;
		}

		.flaight-time {
			border-right: solid 1rpx #fff;
		}
	}
</style>